<script lang="ts" setup>
// 打开新标签页
const openNewTab = async () => {
  // 创建新标签页
  await browser.tabs.create({
    url: browser.runtime.getURL('/newtab.html')
  });
  // 关闭 popup
  window.close();
};

// 打开当前标签页为新标签页
const replaceCurrentTab = async () => {
  await browser.tabs.update({
    url: browser.runtime.getURL('/newtab.html')
  });
  window.close();
};
</script>

<template>
  <div class="popup-container">
    <!-- Logo 区域 -->
    <div class="logo-section">
      <a href="https://wxt.dev" target="_blank">
        <img src="/wxt.svg" class="logo" alt="WXT logo" />
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img src="@/assets/vue.svg" class="logo vue" alt="Vue logo" />
      </a>
    </div>

    <!-- 操作按钮区域 -->
    <div class="actions-section">
      <h3>🚀 WXT 扩展</h3>
      <div class="button-group">
        <button @click="openNewTab" class="action-btn primary">
          📱 打开新标签页
        </button>
        <button @click="replaceCurrentTab" class="action-btn secondary">
          🔄 当前页面替换
        </button>
      </div>
    </div>

    <!-- WXT 信息 -->
    <div class="demo-section">
      <h4>🎯 WXT + Vue</h4>
      <p>现代化的浏览器扩展框架</p>
      <div class="features-mini">
        <span>⚡ 快速</span>
        <span>🔧 TypeScript</span>
      </div>
    </div>

    <!-- 说明文字 -->
    <div class="info-text">
      <p>点击上方按钮体验新标签页功能</p>
    </div>
  </div>
</template>

<style scoped>
.popup-container {
  width: 300px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
}

.logo-section {
  margin-bottom: 20px;
}

.logo {
  height: 4em;
  padding: 1em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #54bc4ae0);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.actions-section {
  margin-bottom: 20px;
}

.actions-section h3 {
  margin: 0 0 15px 0;
  font-size: 1.2rem;
  font-weight: 500;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-btn {
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.action-btn.primary {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.action-btn.primary:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.action-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.demo-section {
  margin: 20px 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 15px;
}

.demo-section h4 {
  margin: 0 0 8px 0;
  font-size: 1rem;
  font-weight: 500;
}

.demo-section p {
  margin: 0 0 10px 0;
  font-size: 0.85rem;
  opacity: 0.9;
}

.features-mini {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.features-mini span {
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
}

.info-text {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 10px;
}

.info-text p {
  margin: 0;
}
</style>
